<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>New VQ</title>
        <link rel="shortcut icon" href="../../img/icon.jpg">

        <script src="https://unpkg.com/vue@3"></script>
        <!-- import CSS -->
        <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
        <!--图标-->
        <script src="//unpkg.com/@element-plus/icons-vue"></script>
        <!-- import JavaScript -->
        <script src="https://unpkg.com/element-plus"></script>

        <script src="../../res_js/axios-0.18.0.js"></script>

        <link rel="stylesheet" href="../../index.css">
        <link rel="stylesheet" href="../index.css">
        <link rel="stylesheet" href="index.css">
        <script src="../../index.js"></script>
        <script src="../index.js"></script>
    </head>
    <body style="margin: 0;overflow: hidden">
        <div id="app" class="app">
            <!--主体-->
            <el-container>
                <!--标题栏-->
                <el-header>
                    <el-menu
                            :default-active="activeIndex"
                            class="el-menu-demo"
                            mode="horizontal"
                            :ellipsis="false"
                            @select="handleSelect">
                        <el-menu-item style="font-size: 30px">New VQ</el-menu-item>
                        <el-menu-item index="1" onclick="window.location.href='/PC/home/index.html'">主页</el-menu-item>
                        <el-menu-item index="2" onclick="window.location.href='/PC/friend/index.html'">好友</el-menu-item>
                        <el-menu-item index="3" onclick="window.location.href='/PC/sala/index.html'">大厅</el-menu-item>
                        <div class="flex-grow"></div>
                        <el-menu-item index="4" onclick="window.location.href='/PC/search/index.html'">
                            <el-icon><Search></Search></el-icon>搜素&ensp;
                        </el-menu-item>
                        <el-menu-item index="5" onclick="window.location.href='/PC/userCenter/index.html'">用户中心</el-menu-item>
                        <el-sub-menu index="6">
                            <template #title><el-avatar src="/img/HeadSculpture.jpg" fit="cover"></el-avatar>&emsp;{{myUser.username}}</template>
                            <el-menu-item index="6-0">消息中心</el-menu-item>
                            <el-menu-item index="6-1">修改头像</el-menu-item>
                            <el-menu-item index="6-2">修改名称</el-menu-item>
                            <el-menu-item index="6-3">修改密码</el-menu-item>
                            <el-menu-item index="6-4"><el-link href="https://wwp.lanzoup.com/iEC150pka3la" target="_blank">下载客户端</el-link></el-menu-item>
                            <el-menu-item index="6-5" @click="exitAccount">退出账号</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-header>
                <!--内容-->
                <el-container>
                    <!--侧边栏-->
                    <el-aside width="20%">
                        <div style="height: 4%; width: 100%">
                            <el-input style="width: 70%" v-model="insertFriendAccount" id="insertFriendAccount" placeholder="好友账号"></el-input>
                            <el-button style="width: 30%" type="primary" @click="insertFriend(this.insertFriendAccount)"><el-icon><Plus></Plus></el-icon>&ensp;添&ensp;加&ensp;</el-button>
                        </div>
                        <el-tabs style="height: 94%" type="border-card"
                                 :stretch="true">
                            <el-tab-pane label="好友" style="width: 100%; padding: 0">
                                <el-table
                                        :data="friendTable"
                                        style="height: 100%;">
                                    <el-table-column
                                            prop="username"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            align="center">
                                        <template #default="scope">
                                            <!--开始聊天-->
                                            <el-button type="primary" @click="chat(scope.row)" circle><el-icon><Comment></Comment></el-icon></el-button>
                                            <!--删除好友-->
                                            <el-button type="danger" @click="deleteFriend(scope.row)" circle><el-icon><Delete></Delete></el-icon></el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane label="关注">
                                <el-table
                                        :data="userTable"
                                        style="height: 100%;">
                                    <el-table-column
                                            prop="username"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            align="center">
                                        <template #default="scope">
                                            <!--删除好友-->
                                            <el-button type="danger" @click="deleteFriend(scope.row)">取消关注</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane label="粉丝">
                                <el-table
                                        :data="fansTable"
                                        style="height: 100%;">
                                    <el-table-column
                                            prop="username"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            align="center">
                                        <template #default="scope">
                                            <!--关注粉丝-->
                                            <el-button type="primary" @click="insertUser(scope.row.account)">关&ensp;注</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-tab-pane>
                        </el-tabs>
                    </el-aside>
                    <!--主体-->
                    <el-main class="main" style="height: 100vh; overflow: auto">
                        <el-card style="height: 80%; width: 80%; margin-left: 10%; margin-top: 5%"
                                 class="box-card" shadow="hover">
                            <template #header>
                                <div class="card-header">
                                    {{message.receiverAcc!=null?message.receiverAcc:"请先拥有一位好友"}}
                                </div>
                            </template>
                            <div id="chat_con" class="chat_con" style="position: sticky; width: 100%; height: 200%; margin-bottom: 0%">
                                <div id="content" class="content"></div>
                                <el-input
                                        id="textarea"
                                        type="textarea"
                                        :autosize="{ minRows: 2, maxRows: 4}"
                                        placeholder="请输入内容"
                                        v-model="message.content">
                                </el-input>
                                <div slot="footer" class="dialog-footer">
<!--                                    <el-button @click="contentClose()">关 闭</el-button>-->
                                    <el-button style="float: right" type="primary" @click="send()">发 送</el-button>
                                </div>
                            </div>
                        </el-card>
<!--                        <el-table-->
<!--                                :data="friendTable"-->
<!--                                stripe-->
<!--                                style="height: 100%;">-->
<!--                                <el-table-column-->
<!--                                    type="index">-->
<!--                                </el-table-column>-->
<!--                                <el-table-column-->
<!--                                    prop="username"-->
<!--                                    label="名称"-->
<!--                                    align="center">-->
<!--                                </el-table-column>-->
<!--                                <el-table-column-->
<!--                                    prop="account"-->
<!--                                    label="账号"-->
<!--                                    align="center">-->
<!--                                </el-table-column>-->
<!--                                <el-table-column-->
<!--                                    label="操作"-->
<!--                                    align="center">-->
<!--                                    <template #default="scope">-->
<!--                                        &lt;!&ndash;开始聊天&ndash;&gt;-->
<!--                                        <el-button type="primary" @click="chat(scope.row)" circle><el-icon><Comment></Comment></el-icon></el-button>-->
<!--                                        &lt;!&ndash;删除好友&ndash;&gt;-->
<!--                                        <el-button type="danger" @click="deleteFriend(scope.row)" circle><el-icon><Delete></Delete></el-icon></el-button>-->
<!--                                    </template>-->
<!--                                </el-table-column>-->
<!--                            </el-table>-->
<!--                        <el-backtop target=".main" :visibility-height=200></el-backtop>-->
                    </el-main>
                </el-container>
            </el-container>

            <!--登录注册-->
            <el-dialog
                    title="登陆注册"
                    v-model="logInDialog"
                    width="30%"
                    :before-close="handleClose"
                    align-center
                    center>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <!--登录-->
                    <el-tab-pane label="登录" name="1">
                        <el-form ref="form" :model="logInForm" label-width="80px">
                            <el-form-item label="账号">
                                <el-input v-model="logInForm.account"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input type="password" v-model="logInForm.password"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="logIn">登 录</el-button>
                                <el-button @click="logInDialog = false">取 消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <!--注册-->
                    <el-tab-pane label="注册" name="2">
                        <el-form ref="form" :model="registerForm" label-width="80px">
                            <el-form-item label="电子邮箱">
                                <el-input v-model="registerForm.email"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码">
                                <el-input style="width: 70%" v-model="registerForm.captcha"></el-input>
                                <el-button style="width: 25%; margin-left: 5%" type="primary" :disabled="sendCaptchaBtnDis"  @click="sendCaptcha('register', registerForm.email)" round>{{sendCaptchaBtnValue}}</el-button>
                            </el-form-item>
                            <el-form-item label="用户名">
                                <el-input v-model="registerForm.username"></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input type="password" placeholder="长度需要在6-20位之内，且须含有字母和数字" v-model="registerForm.password1"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码">
                                <el-input type="password" placeholder="长度需要在6-20位之内，且须含有字母和数字" v-model="registerForm.password2"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="register">注 册</el-button>
                                <el-button @click="logInDialog = false">取 消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <!--忘记密码-->
                    <el-tab-pane label="忘记密码" name="3">
                        <el-form ref="form" :model="forgotPasswordForm" label-width="80px">
                            <el-form-item label="电子邮箱">
                                <el-input v-model="forgotPasswordForm.email"></el-input>
                            </el-form-item>
                            <el-form-item label="验证码">
                                <el-input style="width: 70%" v-model="forgotPasswordForm.captcha"></el-input>
                                <el-button style="width: 25%; margin-left: 5%" type="primary" :disabled="sendCaptchaBtnDis"  @click="sendCaptcha('forgotPassword', forgotPasswordForm.email)" round>{{sendCaptchaBtnValue}}</el-button>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input type="password" placeholder="长度需要在6-20位之内，且须含有字母和数字" v-model="forgotPasswordForm.password1"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码">
                                <el-input type="password" placeholder="长度需要在6-20位之内，且须含有字母和数字" v-model="forgotPasswordForm.password2"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="forgotPassword()">忘 记</el-button>
                                <el-button @click="logInDialog = false">取 消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-dialog>
            <!--修改名称-->
            <el-dialog
                    title="修改名称"
                    v-model="modifyUsernameDialog"
                    width="30%"
                    :before-close="handleClose"
                    align-center>
                <el-form ref="modifyUsernameForm" :model="modifyUsernameForm" label-width="80px">
                    <el-form-item label="账号">
                        <el-input v-model="modifyUsernameForm.account"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="modifyUsernameForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="新名称">
                        <el-input v-model="modifyUsernameForm.newUsername"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="ackModifyUsername">修改</el-button>
                        <el-button @click="modifyUsernameDialog = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <!--修改密码-->
            <el-dialog
                    title="修改密码"
                    v-model="modifyPasswordDialog"
                    width="30%"
                    :before-close="handleClose"
                    align-center>
                <el-form ref="modifyPasswordForm" :model="modifyPasswordForm" label-width="80px">
                    <el-form-item label="旧密码">
                        <el-input type="password" v-model="modifyPasswordForm.oldPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码">
                        <el-input type="password" placeholder="长度需要在6-20位之内，且须含有字母和数字" v-model="modifyPasswordForm.newPassword1"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input type="password" placeholder="长度需要在6-20位之内，且须含有字母和数字" v-model="modifyPasswordForm.newPassword2"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="ackModifyPassword">修改</el-button>
                        <el-button @click="modifyPasswordDialog = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <!--消息中心-->
            <el-drawer
                    title="消息中心"
                    v-model="msgCenterDrawer"
                    direction="rtl">
                <div style="width:100%; height: 80%; overflow: auto">
                    <el-card style="margin: 2%" shadow="hover">
                        欢迎使用VQ0.8.1测试版
                        <!--分割线-->
                        <el-divider></el-divider>
                        本次更新：
                        <ol>
                            <li>更新动态和大厅UI及其交互。</li>
                            <li>修复发布动态按钮不显示的问题。</li>
                        </ol>
                    </el-card>
                </div>
            </el-drawer>


            <!--聊天框-->
            <el-dialog
                    title="聊天框"
                    v-model="ChatDialog"
                    width="30%"
                    :before-close="handleClose"
                    align-center>
<!--                <div id="chat_con" class="chat_con">-->
<!--                    <div id="content" class="content"></div>-->
<!--                    <el-input-->
<!--                            id="textarea"-->
<!--                            type="textarea"-->
<!--                            :autosize="{ minRows: 2, maxRows: 4}"-->
<!--                            placeholder="请输入内容"-->
<!--                            v-model="message.content">-->
<!--                    </el-input>-->
<!--                    <div slot="footer" class="dialog-footer">-->
<!--                        <el-button @click="contentClose()">关 闭</el-button>-->
<!--                        <el-button style="float: right" type="primary" @click="send()">发 送</el-button>-->
<!--                    </div>-->
<!--                </div>-->

            </el-dialog>
        </div>

        <script src="index.js"></script>
    </body>
</html>